<template>
	<view class="page-container">
		<view class="reg-card">
			<text class="form-title">账号注册</text>
			
			<view class="form-group">
				<text>用户名</text>
				<input type="text" placeholder="请输入用户名" v-model="username">
			</view>
			
			<view class="form-group">
				<text>密码</text>
				<input type="password" placeholder="请输入密码" v-model="password">
			</view>
			
			<button class="reg-button" @click="reg">注册</button>
			
			<view class="login-link">
				<text>已有账号？</text>
				<text @click="toLogin">返回登录</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username:'',
				password:''
			}
		},
		methods: {
			reg(){
				uni.request({
					url: 'http://47.94.6.186:3001/api/user/reg',
					method: 'POST',
					data: {
						loginname: this.username,
						password: this.password
					},
					success: (res) => {
						console.log(res.data)
						if(res.data.code == 200){
							uni.showToast({
								title: res.data.message,
								icon: 'success'
							})
							uni.navigateTo({
								url: '/pages/login/login'
							})
						}
						else{
							uni.showToast({
								title: res.data.message,
								icon: 'error'
							})
						}
					}
				})
			},
			toLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
		}
	}
</script>

<style>
/* 注册页面样式 */
.page-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
  padding: 40rpx;
  box-sizing: border-box;
}

.reg-card {
  background-color: #ffffff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  padding: 60rpx 40rpx;
  margin-top: 100rpx;
}

.form-title {
  font-size: 44rpx;
  font-weight: bold;
  text-align: center;
  color: #333333;
  margin-bottom: 60rpx;
}

.form-group {
  margin-bottom: 40rpx;
}

.form-group text {
  display: block;
  font-size: 28rpx;
  color: #666666;
  margin-bottom: 16rpx;
}

.form-group input {
  width: 100%;
  height: 88rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  padding: 0 28rpx;
  box-sizing: border-box;
  font-size: 28rpx;
  color: #333333;
  background-color: #ffffff;
  transition: all 0.3s ease;
}

.form-group input:focus {
  border-color: #007aff;
  outline: none;
  box-shadow: 0 0 0 8rpx rgba(0, 122, 255, 0.1);
}

.form-group input::placeholder {
  color: #c0c0c0;
}

.reg-button {
  width: 100%;
  height: 96rpx;
  background-color: #007aff;
  color: #ffffff;
  border: none;
  border-radius: 12rpx;
  font-size: 32rpx;
  font-weight: bold;
  margin-top: 40rpx;
  transition: all 0.3s ease;
}

.reg-button:active {
  background-color: #0056b3;
  transform: scale(0.98);
}

.login-link {
  text-align: center;
  margin-top: 30rpx;
  font-size: 28rpx;
}

.login-link text {
  color: #007aff;
}

/* 响应式调整 */
@media screen and (min-width: 768px) {
  .reg-card {
    max-width: 600rpx;
    margin: 100rpx auto;
    padding: 80rpx 60rpx;
  }
}
</style>
